<template>
  <TempIndex></TempIndex>
  <div class="app-container home" v-if="false">
    <el-row :gutter="20" style="height: 100%;">
      <el-card class="box-card">
        <div class="dataV-content">
          <Decoration2 :reverse="false" style="width:'100%'; height:5px;" :duration="5" />
          <div class="dataV-content_titleText">洛阳东方医院运维系统</div>
          <Decoration5 style="width:'100%'; height:40px;" :duration="5" />

          <div class="df jc-sb">
            <div v-for="o in 7" :key="o" style="height: 30px;">{{'列表内容111 ' + o }}</div>
          </div>
          <Decoration10 style="width:'100%'; height:5px;" />

          <el-row :gutter="20" class="dataV-content_el_row">
            <div class="df-c" style="width: 100%;">
              <Decoration3 style="width:100px;height:10px;" />
            </div>
            <el-col :span="12">
              <div class="grid-content ep-bg-purple">
                <CapsuleChart :config="histogramConfig" style="width:'100%';height:30vh ; color: var(--el-text-color)   " />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content ep-bg-purple">
                <div class="lineChart" id="lineChart" style="width:'100%';height:30vh"></div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { initWebSocket } from '@/utils/websocket';
import { Decoration4 } from '@dataview/datav-vue3';
import TempIndex from './tempIndex.vue'
// import { borderBox1 ,decoration4, decoration5 } from '@jiaminghi/data-view'
import { Decoration2, Decoration3 , Decoration5, Decoration10, CapsuleChart } from '@kjgl77/datav-vue3';
import * as echarts from 'echarts';
// onMounted(() => {
//   let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
//   initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');

//   initLineChat();
// });
// 柱状图配置项
const histogramConfig = ref({
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 123
    },
    {
      name: '漯河',
      value: 98
    },
    {
      name: '郑州',
      value: 75
    },
    {
      name: '西峡',
      value: 66
    }
  ],
  colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  unit: '单位',
  showValue: true
});

// 折线配置
const initLineChat = () => {
  var chartDom = document.getElementById('lineChart');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: 'category',
      splitLine: {
        show: false
      },

      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false
      }
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        lineStyle: {
          color: '#ff5ca9'
        },
        itemStyle: {
          //设置端点颜色
          normal: {
            color: '#ff5ca9' // 设置线条上点的颜色（和图例的颜色）
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
};

const goTarget = (url: string) => {
  window.open(url, '__blank');
};
</script>

<style scoped lang="scss">
.box-card {
  // background-color: rgb(35, 35, 36);
  width: 100%;
  height: 100%;
  .dataV-content {
    width: 100%;
    height: 100%;
    &_titleText {
      font-size: 20px;
      text-align: center;
    }
    &_el_row {
      margin-bottom: 20px;
      .el-col {
        border-radius: 4px;
        .grid-content {
          border-radius: 4px;
          min-height: 36px;
        }
      }
    }
    &_el_row:last-child {
      margin-bottom: 0;
    }
  }
}

.home {
  height: 100%;
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
